import BaseChart from '@/components/echarts/BaseChart';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';
import { useDayStore } from "@/stores/dayStore";
import { fontSizeRem } from '@/utils/fontSizeRem';

const YearOnYear = () => {

  const dayData = useDayStore(status => status.dayData)
  const YoY = dayData?.revenue.yoy

  let angle = 0; //角度，用来做简单的动画效果的
  function getCirlPoint(x0: number, y0: number, r: number, angle: number) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
      x: x1,
      y: y1
    };
  }

  function draw() {
    angle = angle + 3;
    // myChart.setOption(options);
  }

  setInterval(function () {
    draw();
  }, 100);

  const options = {
    title: {
      text: `YoY\n${YoY}`,
      left: 'center',
      top: 'center',
      textStyle: {
        color: "#fff",
        fontSize: fontSizeRem(12)
      }
    },
    backgroundColor: '',
    series: [{
      name: "内线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(
              api.getWidth(),
              api.getHeight()
            ) / 2.3,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180
          },
          style: {
            stroke: '#0ff',
            fill: "transparent",
            lineWidth: 3.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "内线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(
              api.getWidth(),
              api.getHeight()
            ) / 2.3,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180
          },
          style: {
            stroke: '#0ff',
            fill: "transparent",
            lineWidth: 3.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "外线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(
              api.getWidth(),
              api.getHeight()
            ) / 2.1,
            startAngle: ((270 + -angle) * Math.PI) / 180,
            endAngle: ((40 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: '#0ff',
            fill: "transparent",
            lineWidth: 3.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "外线",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(
              api.getWidth(),
              api.getHeight()
            ) / 2.1,
            startAngle: ((90 + -angle) * Math.PI) / 180,
            endAngle: ((220 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: '#0ff',
            fill: "transparent",
            lineWidth: 3.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "线头点",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r =
          Math.min(api.getWidth(), api.getHeight()) / 2.1;
        let point = getCirlPoint(x0, y0, r, 90 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 5
          },
          style: {
            stroke: '#0ff', //绿
            fill: '#0ff'
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "线头点",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function (_params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r =
          Math.min(api.getWidth(), api.getHeight()) / 2.1;
        let point = getCirlPoint(x0, y0, r, 270 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 5
          },
          style: {
            stroke: '#0ff', //绿
            fill: '#0ff'
          },
          silent: true
        };
      },
      data: [0]
    }, {
      type: 'liquidFill',
      radius: '78%',
      center: ['50%', '50%'],
      color: ['#0ff', '#0ff', '#0ff'], //水波
      data: [0.1, 0.1, 0.1], // data个数代表波浪数
      label: {
        normal: {
          show: false,

        }
      },
      backgroundStyle: {
        borderWidth: 1,
        color: 'transparent'
      },

      outline: {
        show: true,
        itemStyle: {
          borderColor: '#0ff',
          borderWidth: 2
        },
        borderDistance: 3
      }
    },
    ]
  } as EChartsOption;


  return (
    <>
      <div style={{ width: '100%', height: '9vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default YearOnYear;